<template>
  <div class="ele-body">
    <headPreviewStatuss></headPreviewStatuss>

    <siteSearch @search="reload"></siteSearch>
    <el-card :body-style="{ paddingTop: '8px' }">
      <ele-pro-table ref="tableRef"
                     row-key="noticeId"
                     :columns="columns"
                     :datasource="datasource"
                     highlight-current-row
                     :bottom-line="false"
                     cache-key="systemNoticeTable">
        <template #toolbar>
          <el-button type="primary"
                     @click="upLoadCode()"
                     class="ele-btn-icon"
                     icon="el-icon-plus">
            扫码
          </el-button>
          <!-- <el-button type="danger"
                     class="ele-btn-icon"
                     icon="el-icon-delete">
            删除
          </el-button> -->
        </template>
        <template #siteStatus="{ row }">
          <el-tag :underline="false"
                  :type="siteStatusType(row.siteStatus).type">
            {{ siteStatusType(row.siteStatus).status }}
          </el-tag>
        </template>
        <!-- 用户信息 -->

        <template #userInformation="{ row }">
          <div class="realNameStyle">
            <img class="avaterName"
                 :src="row.userAvatar"
                 alt="" />
            <div>
              <div>{{ row.userName }}</div>
            </div>
          </div>
        </template>
        <template #payType="{ row }">
          <el-tag :type="enabledNotType(row.payType).type">
            {{ enabledNotType(row.payType).status }}
          </el-tag>
        </template>

        <template #action="{ row }">
          <el-link type="danger"
                   :underline="false"> 扫码 </el-link>
          <el-popconfirm class="ele-action"
                         title="是否确定要删除该条信息"
                         @confirm="remove(row)">
            <template v-slot:reference>
              <el-link type="danger"
                       :underline="false"> 删除 </el-link>
            </template>

          </el-popconfirm>

        </template>
      </ele-pro-table>
    </el-card>

  </div>
</template>
  
  <script>

import { userOssSignature } from '@/api/creatCenter/material';
import { siteListArr } from './constant/constant';
import headPreviewStatuss from './components/headPreviewStatuss.vue';
import siteSearch from './components/siteSearch.vue';
import { getActivitylist, generateDoupayQrCode } from '@/api/douPayActivityList/index'
import drawerEdit from './components/drawerEdit.vue';
export default {
  name: 'siteList',
  components: {
    drawerEdit,
    siteSearch,
    headPreviewStatuss
  },
  data () {
    return {
      siteListArr,
      // 当前编辑数据
      current: null,
      // 表格列配置
      columns: [
        {
          type: 'selection',
          columnKey: 'selection',
          width: 48,
          align: 'center',
          fixed: 'left'
        },
        {
          type: 'index',
          columnKey: 'index',
          width: 48,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'userInformation',
          label: '用户信息',
          width: 180,
          showOverflowTooltip: true,
          slot: 'userInformation'
        },
        {
          prop: 'payAmount',
          label: '付款金额(元)',

          align: 'center',
          showOverflowTooltip: true,

        },
        {
          prop: 'payTime',
          label: '付款时间',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'returnCashAmount',
          label: '返现金额',

          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'orderNumber',
          label: '订单编号',

          align: 'center',
          showOverflowTooltip: true,
          slot: 'orderNumber'
        },
        {
          prop: 'orderCount',
          label: '订单量',

          align: 'center',
          showOverflowTooltip: true
        },
        // 支付类型1 微信 2 支付宝
        {
          prop: 'payType',
          label: '支付配置',
          align: 'center',
          showOverflowTooltip: true,
          slot: 'payType'
        },
        {
          prop: 'exposureAmount',
          label: '曝光量',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'upvoteAmount',
          label: '点赞量',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'commentAmount',
          label: '评论量',
          align: 'center',
          showOverflowTooltip: true
        },
        // {
        //   prop: 'startDate',
        //   label: '创建时间',

        //   align: 'center',
        //   showOverflowTooltip: true,
        //   formatter: (_row, _column, cellValue) => {
        //     return this.$util.toDateString(cellValue, 'yyyy-MM-dd HH:mm');
        //   }
        // },

        {
          prop: 'createDate',
          label: '创建时间',
          align: 'center',
          showOverflowTooltip: true,
          formatter: (_row, _column, cellValue) => {
            return this.$util.toDateString(cellValue, 'yyyy-MM-dd HH:mm');
          }
        },

        {
          columnKey: 'action',
          label: '操作',
          width: 230,
          align: 'center',
          slot: 'action',
          fixed: 'right'
        }
      ],
      // 表格选中数据
      selection: [],
      // 抽屉是否显示
      drawerEditBoolen: false
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    },

    // 状态
    siteStatusType () {
      return function (siteType) {
        if (siteType == '1') {
          return {
            status: '冻结',
            type: 'danger'
          };
        } else if (siteType == '2') {
          return {
            status: '未冻结',
            type: ' primary'
          };
        }
      };
    },
    enabledNotType () {
      return function (reflectionType) {
        if (reflectionType == '1') {
          return {
            status: '微信',
            type: 'success'
          };
        } else {
          return {
            status: '支付宝',
            type: ''
          };
        }
      };
    }
  },
  activated () {
    this.reload()
  },
  methods: {
    async upLoadCode () {
      const res = await generateDoupayQrCode({
        merchantId: this.$store.state.user.info.merchantId
      })
      console.log(res)
    },
    // 点击查看详情弹出详情抽屉
    // async modify (row) {
    //   //   const res = await topUpRecords()
    //   if (row?.id || row?.id == 0) {
    //     const res = await siteDetail({ id: row.id });
    //     console.log(res[0]);
    //     this.current = res[0];
    //     // 用户余额管理
    //     this.drawerEditBoolen = !this.drawerEditBoolen;
    //   } else {
    //     this.drawerEditBoolen = !this.drawerEditBoolen;
    //     this.current = null;
    //   }
    // },

    // 冻结该条信息
    // async freeze (row) {
    //   console.log(row.id);
    //   const res = await siteModify({
    //     id: row.id,
    //     siteStatus: row.siteStatus == '1' ? '2' : '1'
    //   });
    //   console.log(res);
    //   this.reload();
    //   this.$message.success(res);
    // },
    // 重置密码为123456
    // async resettingPassword (row) {
    //   console.log(row.id);
    //   const res = await siteModify({
    //     id: row.id,
    //     password: '123456',
    //     account: row.account
    //   });
    //   console.log(res);
    //   this.reload();
    //   this.$message.success(res);
    // },
    /* 表格数据源 */
    datasource ({ page, limit }) {
      return getActivitylist({ page, limit, merchantId: this.$store.state.user.info.merchantId });
    },
    /* 刷新表格 */
    reload (where) {
      console.log(where);
      this.$refs.tableRef.reload({ page: 1, where: where });
    },

    /* 删除 */
    // remove (row) {
    //   const loading = this.$loading({ lock: true });
    //   siteDelete({
    //     id: row.id,
    //     account: row.account
    //   })
    //     .then((msg) => {
    //       console.log(msg);
    //       loading.close();
    //       this.$message.success(msg);
    //       this.reload();
    //     })
    //     .catch((e) => {
    //       loading.close();
    //       this.$message.error(e.message);
    //     });
    // },
    /* 批量删除 */
    removeBatch () {
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      this.$confirm('确定要删除选中的套餐吗?', '提示', {
        type: 'warning'
      })
        .then(() => {
          const loading = this.$loading({ lock: true });
          removeMeal({ ids: this.selection.map((d) => d.id) })
            .then((msg) => {
              loading.close();
              this.$message.success(msg);
              this.reload();
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        })
        .catch(() => { });
    },

  }
};
  </script>
  <style lang="less" scoped>
.realNameStyle {
  display: flex;
  justify-content: start;
  align-items: center;
  .avaterName {
    width: 32px;
    height: 32px;
    border-radius: 32px;
    vertical-align: middle;
    margin-right: 5px;
  }
}
</style>
  